<template>
    <div id="studies-results-list">
        <Title title="研学成果"/>
        <div id="form">
            <el-form>
                <div class="line1">
                    <el-form-item>
                        <el-select v-model="value" placeholder="研学名称">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="value" placeholder="区域">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="value" placeholder="学校">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="value" placeholder="年级">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="value" placeholder="班级">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="line2">
                    <el-form-item>
                        <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"/>
                    </el-form-item>
                    <el-form-item>
                        <el-time-picker placeholder="选择时间" style="width: 100%;"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button>查询</el-button>
                    </el-form-item>
                </div>
                <div class="line3">
                    <el-form-item>
                        <el-input suffix-icon="el-icon-search" placeholder="请输入"/>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="list">
            <List>
                <template v-slot:item>
                    <Item @show-details="showDetails">
                        <template v-slot:radio>
                            <el-radio v-model="flag" class="radio"/>
                        </template>
                    </Item>
                </template>
            </List>
        </div>
        <div class="tab-control">
            <TabControl :options="options2" @tabClick="tabClick">
                <div v-if="label === '精彩瞬间'">
                    <wonderful-list/>
                </div>
                <div v-else>
                    <TravelToSummarize/>
                </div>
            </TabControl>
        </div>
    </div>
</template>

<script>
    import {Input, Select, FormItem, Form, Button, Option, TimePicker, DatePicker, Radio} from "element-ui";
    import List from "../../../../components/list/List";
    import Item from "../../../../components/list/item/Item";
    import Title from "../../../../components/title/Title";
    import TabControl from "../../../../components/tabControl/TabControl";
    import WonderfulList from "../../../school/researchAchievements/Research/childComponent/studiesResults/splendid/wonderfulList/WonderfulList";
    import TravelToSummarize from "../travelToSummarize/TravelToSummarize";

    export default {
        name: "StudiesResultsList",
        components: {
            Title,
            List,
            Item,
            TabControl,
            WonderfulList,
            TravelToSummarize,
            "el-radio": Radio,
            "el-input": Input,
            "el-select": Select,
            "el-form-item": FormItem,
            "el-form": Form,
            "el-button": Button,
            "el-option": Option,
            "el-time-picker": TimePicker,
            "el-date-picker": DatePicker
        },
        data() {
            return {
                flag: "1",
                label: '精彩瞬间',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                options2: [{
                    label: "精彩瞬间",
                    name: "精彩瞬间"
                },
                    {
                        label: "出行总结",
                        name: "出行总结"
                    },
                ]
            }
        },
        methods:{
            tabClick(label) {
                this.label = label;
                console.log(this.label);
            },
            showDetails(){
                this.$router.push("/base/home");
            }
        }
    }
</script>

<style scoped>
    .line1 {
        display: flex;
        justify-content: space-evenly;
    }

    .line2 {
        width: 700px;
        display: flex;
        justify-content: space-evenly;
        margin-left: 80px;
        margin-top: 30px;
    }

    .line3 {
        width: 300px;
        margin-left: 130px;
        margin-top: 20px;
    }

    /deep/ .radio {
        margin-left: 130px;
        font-size: 30px;
        margin-right: -30px;
    }
    .list{
        margin-top: 40px;
    }
    .tab-control{
        margin-left: 130px;
        width: 1000px;
        margin-top: 50px;
    }
</style>
